<!-- 声明文档类型为 HTML5 -->
<!DOCTYPE html>
<!-- 定义 HTML 文档，设置语言为简体中文 -->
<html lang="zh-CN">

<!-- 定义文档的头部信息 -->

<head>
    <!-- 设置文档的字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置页面在移动设备上的视口，使其宽度与设备宽度一致，初始缩放比例为 1.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置页面的标题 -->
    <title>[ 月华 ]的[ 简单渲染 ]页面的[ 空闲待机 ]动画</title>
    <!-- 图表库 - ECharts v5.4.3 -->
    <script src="./import/echarts.min.js"></script>
    <!-- 定义页面的样式信息 -->
    <style>
        /**
         * 引入 Font Awesome 6.4.0 图标库样式文件
         */
        @import url('./import/fontAwesome/css/all.min.css');
        /**
         * 引入自定义的页面样式文件
         */
        @import url('./css/timePageStyle.css');
    </style>
</head>

<!-- 定义文档的主体内容 -->

<body>
    <!-- 定义页面的容器 -->
    <div class="container">
        <!-- 定义页面的头部区域 -->
        <div class="header">
            <!-- 定义页面的主标题，包含一个时钟图标 -->
            <h1><i class="fas fa-clock"></i> 时光之轮 - 三仪表盘时间显示器</h1>
            <!-- 定义页面的描述信息 -->
            <p>实时追踪时间流逝，感受时光的流转</p>
        </div>

        <!-- 定义仪表盘区域 -->
        <div class="dashboard">
            <!-- 定义图表容器 -->
            <div class="charts-container">
                <!-- 定义图表区域的标题 -->
                <h2 class="charts-title">时间仪表盘</h2>
                <!-- 定义图表的包装容器 -->
                <div class="charts-wrapper">
                    <!-- 定义单个小时图表项 -->
                    <div class="chart-item">
                        <!-- 定义小时图表的渲染容器 -->
                        <div id="hourChart" class="chart"></div>
                        <!-- 定义小时图表的标题 -->
                        <div class="chart-title">小时</div>
                    </div>
                    <!-- 定义单个分钟图表项 -->
                    <div class="chart-item">
                        <!-- 定义分钟图表的渲染容器 -->
                        <div id="minuteChart" class="chart"></div>
                        <!-- 定义分钟图表的标题 -->
                        <div class="chart-title">分钟</div>
                    </div>
                    <!-- 定义单个秒钟图表项 -->
                    <div class="chart-item">
                        <!-- 定义秒钟图表的渲染容器 -->
                        <div id="secondChart" class="chart"></div>
                        <!-- 定义秒钟图表的标题 -->
                        <div class="chart-title">秒钟</div>
                    </div>
                </div>
            </div>

            <!-- 定义控制面板区域 -->
            <div class="controls">
                <!-- 定义时间显示区域 -->
                <div class="time-display" id="timeDisplay">--:--:--</div>

                <!-- 定义时间信息区域 -->
                <div class="time-info">
                    <!-- 定义天数信息项 -->
                    <div>
                        <!-- 定义天数的值显示区域 -->
                        <div class="value" id="dayValue">0</div>
                        <!-- 定义天数的标签 -->
                        <div class="label">天</div>
                    </div>
                    <!-- 定义小时信息项 -->
                    <div>
                        <!-- 定义小时的值显示区域 -->
                        <div class="value" id="hourValue">0</div>
                        <!-- 定义小时的标签 -->
                        <div class="label">小时</div>
                    </div>
                    <!-- 定义分钟信息项 -->
                    <div>
                        <!-- 定义分钟的值显示区域 -->
                        <div class="value" id="minuteValue">0</div>
                        <!-- 定义分钟的标签 -->
                        <div class="label">分钟</div>
                    </div>
                    <!-- 定义秒钟信息项 -->
                    <div>
                        <!-- 定义秒钟的值显示区域 -->
                        <div class="value" id="secondValue">0</div>
                        <!-- 定义秒钟的标签 -->
                        <div class="label">秒</div>
                    </div>
                </div>

                <!-- 定义控制组 -->
                <div class="control-group">
                    <!-- 定义时间格式选择的标题，包含一个日历图标 -->
                    <h3><i class="fas fa-calendar-alt"></i> 时间格式</h3>
                    <!-- 定义单选按钮组 -->
                    <div class="radio-group">
                        <!-- 定义 12 小时制的单选按钮选项 -->
                        <label class="radio-option">
                            <input type="radio" name="timeFormat" value="12" checked>
                            <span>12小时制</span>
                        </label>
                        <!-- 定义 24 小时制的单选按钮选项 -->
                        <label class="radio-option">
                            <input type="radio" name="timeFormat" value="24">
                            <span>24小时制</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 引入自定义的页面脚本文件 -->
    <script src="./js/timePageScript.js"></script>
</body>

</html>